import { View, Text } from '@tarojs/components'
import React from 'react'
import Taro from '@tarojs/taro'
import './index.scss'

const Addresses = () => {
  const addresses = [
    {
      id: '1',
      name: '公司',
      address: '北京市朝阳区望京SOHO T1',
      tag: '工作',
      isDefault: true
    },
    {
      id: '2',
      name: '家',
      address: '北京市海淀区西二旗软件园',
      tag: '住宅',
      isDefault: false
    }
  ]

  const handleAddAddress = () => {
    Taro.navigateTo({
      url: '/pages/addresses/edit/index'
    })
  }

  const handleEditAddress = (id) => {
    Taro.navigateTo({
      url: `/pages/addresses/edit/index?id=${id}`
    })
  }

  return (
    <View className='addresses'>
      <View className='addresses__header'>
        <Text className='addresses__title'>常用地址</Text>
        <Text className='addresses__count'>{addresses.length}个地址</Text>
      </View>

      {addresses.length > 0 ? (
        <View className='addresses__list'>
          {addresses.map(address => (
            <View
              key={address.id}
              className='addresses__item'
              onClick={() => handleEditAddress(address.id)}
            >
              <View className='addresses__item-header'>
                <Text className='addresses__item-name'>{address.name}</Text>
                {address.isDefault && (
                  <Text className='addresses__item-default'>默认</Text>
                )}
                <Text className='addresses__item-tag'>{address.tag}</Text>
              </View>
              <View className='addresses__item-content'>
                <Text className='fa-solid fa-location-dot addresses__item-icon' />
                <Text className='addresses__item-address'>{address.address}</Text>
              </View>
              <Text className='fa-solid fa-chevron-right addresses__item-arrow' />
            </View>
          ))}
        </View>
      ) : (
        <View className='addresses__empty'>
          <Text className='fa-solid fa-map-location-dot addresses__empty-icon' />
          <Text className='addresses__empty-text'>暂无常用地址</Text>
          <Text className='addresses__empty-tip'>添加地址更方便点餐哦</Text>
        </View>
      )}

      <View className='addresses__add' onClick={handleAddAddress}>
        <Text className='fa-solid fa-plus addresses__add-icon' />
        <Text className='addresses__add-text'>新增地址</Text>
      </View>
    </View>
  )
}

export default Addresses 